<template>
  <div id="app">
    <div class="db">
      <van-nav-bar
        title="我的充电设置"
        left-text=""
        left-arrow
        @click-left="$router.push('/home/mine')"
        @click-right="onClickRight"
      />
    </div>
    <div class="fu">
      <div class="top">
        <van-tabs v-model="active" swipeable sticky>
          <van-tab :title="'启动APP'">
            <span class="bt1">启动APP设置</span>
            <div class="text1">
              <h3>展示首页</h3>
              <van-radio-group v-model="radio">
                <van-cell-group>
                  <van-cell
                    style="padding: 10px"
                    title="启动App默认为您展示首页,可以关注到首页的活动和推荐"
                    clickable
                    @click="radio = '1'"
                  >
                    <template #right-icon>
                      <van-radio name="1" />
                    </template>
                  </van-cell>
                  <h3>展示附近电站</h3>
                  <van-cell
                    style="padding: 10px"
                    title="启动APP默认为您展示附近电站,更便捷的找桩充电"
                    clickable
                    @click="radio = '2'"
                  >
                    <template #right-icon>
                      <van-radio name="2" />
                    </template>
                  </van-cell>
                </van-cell-group>
              </van-radio-group>
            </div>
          </van-tab>
          <van-tab :title="'扫码充电'">
            <span class="bt1">扫码充电</span>
            <div class="text1">
              <h3>扫码进入终端详情</h3>
              <van-radio-group v-model="radio">
                <van-cell-group>
                  <van-cell
                    style="padding: 10px"
                    title="扫码后进入详情页面,在终端详情页面启动充电"
                    clickable
                    @click="radio = '1'"
                  >
                    <template #right-icon>
                      <van-radio name="1" />
                    </template>
                  </van-cell>
                  <h3>扫码立即启动充电</h3>
                  <van-cell
                    style="padding: 10px"
                    title="部分场站支持定时充电,如需启动定时充电,请设置为”进入终端详情“,在终端详情页面开启定时充电"
                    clickable
                    @click="radio = '2'"
                  >
                    <template #right-icon>
                      <van-radio name="2" />
                    </template>
                  </van-cell>
                </van-cell-group>
              </van-radio-group>
            </div>
          </van-tab>
          <van-tab :title="'充电数量'">
            <span class="bt1">充电数量设置</span>
            <div class="text2">
              <van-cell
                is-link
                title="可同时开启的充电数量(3辆)"
                @click="show = true"
                style="padding: 10px 20px; font-size: 20px"
              />
              <van-action-sheet
                v-model="show"
                style="height: 40%; font-size: 20px; padding: 10px"
                :actions="actions"
                @select="onSelect"
              />
            </div>
            <span class="bt1"
              >默认最多可同时给3台车充电,如需调整上线.
              <a href="#" class="kf">请联系客服</a></span
            >
          </van-tab>
          <div>
            <van-tab :title="'代充'">
              <span class="bt1">代我充</span>
              <div class="dc"><img src="/img/dc.jpg" alt="" /></div>
              <span class="bt1"
                >已授权代我充电的用户,可以使用您的特来电个人余额账户给您的爱车充电,请确保个人余额充足.充电过程中以及充电结束后,您和代充用户都可以通过特来电APP看到充电订单。</span
              >
              <span class="bt1">我代充</span>
              <div class="dc"><img src="/img/dc.jpg" alt="" /></div>
              <span class="bt2"
                >您可以使用您的特来电账号给以上车辆代充,扫码后,在终端详情页面选择代充车辆即可使用车主的余额账户启动充电.充电过程中以及充电结束后,您和车主都可以通过特来电APP看到充电的订单。</span
              >
            </van-tab>
          </div>
        </van-tabs>
      </div>

      <div class="container"></div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  methods: {
    onClickLeft() {
      //   Toast('返回');
      this.$router.push("/mine");
    },
    onClickRight() {
      Toast("按钮");
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
  },
  data() {
    return {
      radio: "1",
      active: 4,
      show: false,
      actions: [{ name: "1辆" }, { name: "2辆" }, { name: "3辆" }],
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.db {
  width: 100vw;
  position: fixed;
  top: 0;
}
.fu {
  background-color: gainsboro;
  margin-top: 10%;
  .top {
    .bt1 {
      display: block;
      margin: 10px 10px;
      color: rgb(82, 79, 79);
    }
    .text1 {
      background-color: white;
      h3 {
        padding: 10px 10px;
      }
      h6 {
        color: rgb(82, 79, 79);
        padding: 0px 10px;
        padding: 10px 10px;
      }
    }
    .text2 {
      font-size: 30px;
      font-weight: 800;
    }
    .kf {
      color: lightseagreen;
    }
  }
  .dc {
    img {
      width: 100%;
      height: 100%;
    }
  }
  .bt2 {
    display: block;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 10px;
    color: rgb(82, 79, 79);
  }
}
</style>